<template>
  <div>
    <div style="padding: 20px">
      <el-radio-group v-model="project">
        <el-radio
          v-for="item in projects"
          :key="item.value"
          :label="item.value"
          @change.native="get_bug_tree(project)"
        >
          {{ item.label }}
        </el-radio>
      </el-radio-group>
    </div>
    <div>
      <div style="border-radius: 2px; float: left; width: 17%; padding-right:10px;height: 100%;overflow: auto">
        <el-input v-model="filterText" placeholder="请输入要搜索的节点" style="margin-bottom:5px;" />
        <el-tree
          ref="tree"
          :data="tree_data"
          :props="defaultProps"
          :highlight-current="true"
          class="filter-tree"
          :default-expanded-keys="[1, 10]"
          :expand-on-click-node="false"
          :filter-node-method="filterNode"
          node-key="id"
          draggable
          @node-click="node_click"
        >
          <span slot-scope="{ node, data }" class="custom-tree-node" @mouseenter="getcase(data)">
            <span v-if="data.type===0"><i :class="icon0" style="padding-right: 5px" />{{ node.label }}</span>
            <span v-if="data.type===1"><i :class="icon1" style="padding-right: 5px" />{{ node.label }}</span>
            <span v-if="data.type===2"><i :class="icon2" style="padding-right: 5px" />{{ node.label }}</span>
            <span v-if="data.type === 0" class="right" :class="{newStyle: 1 === number}">
              <el-dropdown placement="bottom">
                <i class="el-icon-more" />
                <span class="el-dropdown-link" style="font-size: 20px" />
                <el-dropdown-menu slot="dropdown" class="header-new-drop">
                  <el-dropdown-item icon="el-icon-folder-add" @click.native="new_menu(data)">新建子菜单</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </span>
            <span v-if="data.type === 1" class="right" :class="{newStyle: 1 === number}">
              <el-dropdown placement="bottom">
                <i class="el-icon-more" />
                <span class="el-dropdown-link" style="font-size: 20px" />
                <el-dropdown-menu slot="dropdown" class="header-new-drop">
                  <el-dropdown-item icon="el-icon-folder-add" @click.native="new_menu(data)">新增</el-dropdown-item>
                  <el-dropdown-item divided icon="el-icon-edit" @click.native="edit_menu(data)">编辑</el-dropdown-item>
                  <el-dropdown-item divided icon="el-icon-folder-delete" @click.native="del_menus(node, data)">删除文件夹</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </span>
            <span v-if="data.type ===2" class="right" :class="{newStyle: 2 === number}">
              <el-dropdown placement="bottom">
                <i class="el-icon-more" />
                <span class="el-dropdown-link" style="font-size: 20px" />
                <el-dropdown-menu slot="dropdown" class="header-new-drop">
                  <el-dropdown-item icon="el-icon-edit" @click.native="edit_menu(data)">编辑</el-dropdown-item>
                  <el-dropdown-item divided icon="el-icon-document-delete" @click.native="del_menus(node, data)">删除模块</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </span>
          </span>
        </el-tree>
      </div>
      <div style="overflow: auto; height: 100%">
        <el-tabs v-model="TabsValue" type="card" closable @tab-remove="removeTab" @tab-click="tab_click">
          <el-tab-pane
            v-for="(item) in tableTabs"
            :key="item.name"
            :label="item.title"
            :name="item.name"
          >
            <span slot="label">
              <span v-if="item.type===1"><i :class="icon1" style="padding-right: 5px" />{{ item.title }}</span>
              <span v-if="item.type===2"><i :class="icon2" style="padding-right: 5px" />{{ item.title }}</span>
            </span>
            <div v-show="1 === number" style="padding: 10px">
              {{ item.title }}
            </div>
            <div v-show="2 === number">
              <div style="padding: 10px">
                <el-descriptions :column="3" border>
                  <el-descriptions-item label-class-name="my-label" label="模块ID:" :content-style="{'text-align': 'left'}" style="width: 200px">
                    {{ item.content }}</el-descriptions-item>
                  <el-descriptions-item label-class-name="my-label" label="模块名称:" :content-style="{'text-align': 'left'}" style="width: 200px">{{ item.title }}</el-descriptions-item>
                  <el-descriptions-item label-class-name="my-label" label="创建人:" :content-style="{'text-align': 'left'}" style="width: 200px">{{ create_username }}</el-descriptions-item>
                  <el-descriptions-item label-class-name="my-label" label="原型地址:" :content-style="{'text-align': 'left'}" style="width: 200px">
                    {{ project_prd }}</el-descriptions-item>
                  <el-descriptions-item label-class-name="my-label" label="创建时间:" :content-style="{'text-align': 'left'}" style="width: 200px">
                    {{ create_time }}</el-descriptions-item>
                  <el-descriptions-item label-class-name="my-label" label="编辑时间:" :content-style="{'text-align': 'left'}" style="width: 200px">
                    {{ update_time }}</el-descriptions-item>
                </el-descriptions>
              </div>
              <div style="padding-left: 10px; padding-top: 10px; padding-right: 10px;">
                <el-input id="task_name" v-model="bug_name" placeholder="请输入Bug名称" style="width: 200px; padding-right: 10px;" />
                <el-date-picker
                  v-model="select_time"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="datetimerange"
                  :default-time="['00:00:00', '23:59:59']"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                />
                <el-select v-model="username_select" placeholder="处理人" clearable style="width: 150px; padding: 10px">
                  <el-option
                    v-for="item in user_list"
                    :key="item.user_id"
                    :label="item.username"
                    :value="item.user_id"
                  />
                </el-select>
                <el-button type="primary" @click="get_bug_list">搜索</el-button>
                <el-button type="success" style="float: right" @click="add_bug_dialog">新增Bug</el-button>
              </div>
              <div style="padding: 10px">
                <el-table
                  :data="bug_data"
                  element-loading-text="Loading"
                  border
                  fit
                  highlight-current-row
                  style="float:left;width:100%"
                >
                  <el-table-column align="center" label="ID" width="80px">
                    <template slot-scope="scope">
                      {{ scope.row.id }}
                    </template>
                  </el-table-column>
                  <el-table-column label="Bug名称" width="400px">
                    <template slot-scope="scope">
                      {{ scope.row.bug_name }}
                    </template>
                  </el-table-column>
                  <el-table-column align="center" prop="bug_urgency" label="优先级" width="100px">
                    <template slot-scope="scope">
                      <span v-if="scope.row.bug_urgency===1"><el-tag type="danger">紧急</el-tag></span>
                      <span v-if="scope.row.bug_urgency===2"><el-tag type="danger">高</el-tag></span>
                      <span v-if="scope.row.bug_urgency===3"><el-tag type="success">低</el-tag></span>
                      <span v-if="scope.row.bug_urgency===4"><el-tag type="info">无关紧要</el-tag></span>
                    </template>
                  </el-table-column>
                  <el-table-column class-name="status-col" label="严重程度" align="center" width="80px">
                    <template slot-scope="scope">
                      <span v-if="scope.row.bug_severity===1"><el-tag type="danger">致命</el-tag></span>
                      <span v-if="scope.row.bug_severity===2"><el-tag type="danger">严重</el-tag></span>
                      <span v-if="scope.row.bug_severity===3"><el-tag type="success">一般</el-tag></span>
                      <span v-if="scope.row.bug_severity===4"><el-tag type="warning">建议</el-tag></span>
                      <span v-if="scope.row.bug_severity===5"><el-tag type="info">提示</el-tag></span>
                    </template>
                  </el-table-column>
                  <el-table-column class-name="status-col" label="处理状态" align="center" width="80px">
                    <template slot-scope="scope">
                      <span v-if="scope.row.bug_status===1"><el-tag type="warning">新</el-tag></span>
                      <span v-if="scope.row.bug_status===2"><el-tag type="primary">接收</el-tag></span>
                      <span v-if="scope.row.bug_status===3"><el-tag type="success">已解决</el-tag></span>
                      <span v-if="scope.row.bug_status===4"><el-tag type="warning">拒绝</el-tag></span>
                      <span v-if="scope.row.bug_status===5"><el-tag type="danger">重新打开</el-tag></span>
                      <span v-if="scope.row.bug_status===6"><el-tag type="info">已关闭</el-tag></span>
                      <span v-if="scope.row.bug_status===7"><el-tag type="primary">挂起</el-tag></span>
                    </template>
                  </el-table-column>
                  <el-table-column class-name="status-col" label="处理人" align="center" width="100px">
                    <template slot-scope="scope">
                      {{ scope.row.deal_user }}
                    </template>
                  </el-table-column>
                  <el-table-column align="left" prop="create_time" label="创建时间" width="160px">
                    <template slot-scope="scope">
                      <span>{{ scope.row.create_time }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="创建人" align="center" width="100px">
                    <template slot-scope="scope">
                      {{ scope.row.username }}
                    </template>
                  </el-table-column>
                  <el-table-column align="center" prop="action" label="操作">
                    <template slot-scope="scope">
                      <el-button type="primary" size="small" @click="view_bug_dialog(scope.row)">查看详情</el-button>
                      <el-button type="primary" size="small" @click="edit_bug_dialog(scope.row)">编辑</el-button>
                      <el-button type="danger" size="small" @click="delete_bug_dialog(scope.row.id)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div v-show="2 === number" class="block">
                <el-pagination
                  background
                  :current-page="bug_page.current_page"
                  :page-sizes="[8]"
                  :page-size="bug_page.size_page"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="bug_total"
                  style="float: left; padding: 10px"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                />
              </div>
              <div />
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div>
      <el-dialog
        title="提示"
        :visible.sync="del_dialog"
        width="20%"
      >
        <span>是否删除该配置项</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="del_dialog = false">取 消</el-button>
          <el-button type="primary" @click="delete_menu()">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <div>
      <el-dialog
        title="提示"
        :visible.sync="del_bug_dialog"
        width="20%"
      >
        <span>是否删除此条bug</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="del_bug_dialog = false">取 消</el-button>
          <el-button type="primary" @click="delete_bug()">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <div>
      <el-dialog
        title="新增模块/文件夹"
        :visible.sync="add_dialogVisible"
        width="30%"
      >
        <el-form :model="menu_pid">
          <el-form-item v-show="1 === action" label="ID：">
            <el-input v-model="project_id" style="width: 200px" disabled />
          </el-form-item>
          <el-form-item v-show="0 === action" label="类型：">
            <el-select v-model="type_value">
              <el-option
                v-for="item in type_form"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="名称：">
            <el-input v-model="project_form.label" style="width: 250px" />
          </el-form-item>
          <el-form-item label="需求地址：">
            <el-input v-model="project_prd" style="width: 250px" />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="add_dialogVisible = false">取 消</el-button>
          <el-button v-show="0 === action" type="primary" @click="add_menu_project">确 定</el-button>
          <el-button v-show="1 === action" type="primary" @click="edit_menu_project">保存</el-button>
        </span>
      </el-dialog>
    </div>
    <div>
      <el-dialog
        title="Bug单"
        :visible.sync="add_bug_dialogVisible"
        width="65%"
      >
        <el-form :model="bug_detail">
          <el-form-item label="严重程度:">
            <el-select v-model="bug_detail.bug_severity" placeholder="严重程度" clearable style="width: 200px">
              <el-option
                v-for="item in bug_severity_list"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="紧急程度:">
            <el-select v-model="bug_detail.bug_urgency" placeholder="紧急程度" clearable style="width: 200px">
              <el-option
                v-for="item in bug_urgency_list"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item v-show="1 === action" label="处理状态:">
            <el-select v-model="bug_detail.bug_status" placeholder="处理状态" clearable style="width: 200px">
              <el-option
                v-for="item in bug_status_list"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="处理人员:">
            <el-select v-model="bug_detail.deal_user_id" placeholder="处理人" clearable style="width: 200px">
              <el-option
                v-for="item in user_list"
                :key="item.user_id"
                :label="item.username"
                :value="item.user_id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="Bug名称:">
            <el-input v-model="bug_detail.bug_name" placeholder="请输入Bug名称" style="width: 600px" />
          </el-form-item>
        </el-form>
        <quill-editor
          ref="myQuillEditor"
          v-model="bug_detail.bug_content"
          :options="editorOption"
          class="quillEditor"
          @ready="onEditorReady"
        />
        <span slot="footer" class="dialog-footer">
          <el-button @click="add_bug_dialogVisible = false">取 消</el-button>
          <el-button v-show="0 === action" type="primary" @click="add_bug">确 定</el-button>
          <el-button v-show="1 === action" type="primary" @click="add_bug">保存</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { project_data } from "@/api/project";
import { add_bug_detail, add_edit_menu, bug_list, bug_tree, del_bug, del_menu, input_img } from "@/api/bug";
import { user_all } from "@/api/user";
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'

export default {
  name: "Bug",
  components: {
    quillEditor,
  },
  data() {
    return {
      bug_id: null,
      del_bug_dialog: false,
      uploading: null,
      host: "",
      bug_urgency_list: [
        { "label": "紧急", "value": 1 },
        { "label": "高", "value": 2 },
        { "label": "低", "value": 3 },
        { "label": "无关紧要", "value": 4 }
      ],
      bug_status_list: [
        { "label": "新", "value": 1 },
        { "label": "接受", "value": 2 },
        { "label": "已解决", "value": 3 },
        { "label": "拒绝", "value": 4 },
        { "label": "重新打开", "value": 5 },
        { "label": "已关闭", "value": 6 },
        { "label": "已挂起", "value": 7 },
      ],
      bug_severity_list: [
        { "label": "致命", "value": 1 },
        { "label": "严重", "value": 2 },
        { "label": "一般", "value": 3 },
        { "label": "建议", "value": 4 },
        { "label": "提示", "value": 5 },
      ],
      bug_detail: {
        bug_content: ""
      },
      editorOption: {
        theme: 'snow',
        placeholder: '请输入内容',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗、斜体、下划线、删除线
            ['blockquote', 'code-block'], // 引用、代码块
            [{ 'header': 1 }, { 'header': 2 }], // 标题1、标题2
            [{ 'list': 'ordered' }, { 'list': 'bullet' }], // 有序列表、无序列表
            [{ 'script': 'sub' }, { 'script': 'super' }], // 上标/下标
            [{ 'indent': '-1' }, { 'indent': '+1' }], // 缩进
            [{ 'direction': 'rtl' }], // 文本方向
            [{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }], // 标题选择
            [{ 'color': [] }, { 'background': [] }], // 字体颜色、背景颜色
            [{ 'font': [] }], // 字体
            [{ 'align': [] }], // 对齐方式
            ['clean'], // 清除格式
            ['image', 'video'], // 上传图片、上传视频
          ],
        }
      },
      add_bug_dialogVisible: false,
      action: 0,
      project_prd: "",
      project_form: {
        label: '',
        pid: '',
        type: null,
        user_id: null,
      },
      type_value: '',
      type_form: [
        {
          label: "文件夹",
          value: 1
        },
        {
          label: "需求模块",
          value: 2
        },
      ],
      menu_list: [],
      node_data: [],
      del_dialog: false,
      add_dialogVisible: false,
      bug_name: "",
      username_select: "",
      select_time: [],
      user_list: [],
      create_username: "",
      bug_data: [],
      bug_total: 0,
      number: null,
      icon0: 'el-icon-s-home',
      icon1: 'el-icon-folder-opened',
      icon2: 'el-icon-menu',
      project: 1,
      filterText: "",
      menu_pid: null,
      projects: [],
      tree_data: [],
      create_time: "",
      update_time: "",
      defaultProps: {
        children: 'children',
        label: 'label',
        id: "id"
      },
      bug_page: {
        project_name: "",
        current_page: 1,
        size_page: 8,
      },
      TabsValue: "",
      editableTabsValue: '根目录',
      tableTabs: [],
      editableTabs: [],
      project_id: null,
      menu_id: null
    }
  },
  created() {
    this.get_project()
    this.get_user_select()
  },
  mounted() {
    // 自定义图片上传功能
    this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('image', () => {
      const input = document.createElement('input')
      input.type = 'file'
      input.accept = 'image/*'
      input.click()
      input.onchange = () => {
        const file = input.files[0]
        this.imgHandler(file)
        console.log(file)
      }
    })
  },
  methods: {
    // 文件上传处理
    imgHandler(file) {
      const formData = new FormData()
      formData.append('file', file)
      input_img(formData)
        .then(response => {
          const range = this.$refs.myQuillEditor.quill.getSelection(true)
          this.$refs.myQuillEditor.quill.insertEmbed(range.index, 'image', response.data.image_url)
          this.$refs.myQuillEditor.quill.setSelection(range.index + 1)
        })
        .catch(error => {
          console.log(error)
        })
    },
    onEditorReady() {
      // 自定义图片上传功能
      this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('image', () => {
        const input = document.createElement('input')
        input.type = 'file'
        input.accept = 'image/*'
        input.click()
        input.onchange = () => {
          const file = input.files[0]
          this.imgHandler(file)
        }
      })
    },
    get_project() {
      project_data().then(res => {
        this.projects = res.data.content
        this.project = this.projects[0].value
        this.get_bug_tree(this.project)
      })
    },
    // 获取接口目录
    get_bug_tree(data) {
      this.project_id = data
      bug_tree({ "user_id": localStorage.getItem("user_id"), "project_id": data }).then(res => {
        if (res.data.code === 200) {
          this.tree_data = res.data.content
        } else if (res.data.code === 1001) {
          this.$message.error(res.data.message)
          this.$router.push("/login")
        }
      })
    },
    filterNode(value, tree_data) {
      if (!value) return true;
      return tree_data.label.indexOf(value) !== -1;
    },
    tab_click(tab) {
      const tabs = this.tableTabs
      for (const t of tabs) {
        if (t.name === tab.name) {
          if (t.type === 1) {
            this.number = 1
            this.menu_id = t.content
          } else if (t.type === 2) {
            this.number = 2
            this.menu_id = t.content
          }
        }
      }
    },
    removeTab(targetName) {
      const tabs = this.tableTabs;
      let activeName = this.TabsValue;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            const nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.name;
              this.tab_click(nextTab)
            }
          }
        });
      }
      this.TabsValue = activeName;
      this.tableTabs = tabs.filter(tab => tab.name !== targetName);
    },
    addTab(targetName, id, type) {
      const index = this.tableTabs.findIndex(item => item.title === targetName)
      if (index === -1) {
        this.tableTabs.push({
          title: targetName,
          name: targetName,
          content: id,
          type: type
        })
      }
      this.TabsValue = targetName;
    },
    node_click(data) {
      if (data.type === 1) {
        this.number = 1
        this.menu_id = data.id
        this.addTab(data.label, data.id, data.type)
      } else if (data.type === 2) {
        this.number = 2
        this.menu_id = data.id
        this.project_prd = data.project_prd
        this.addTab(data.label, data.id, data.type)
        this.get_bug_list()
      }
    },
    getcase(data) {
      switch (data.type) {
        case 1:
          this.menu_id = data.id;
          break;
        case 2:
          this.menu_id = data.id;
          break;
        case 0:
          this.menu_id = data.id;
          break;
        default:
          break;
      }
    },
    // 页签-条/页 跳转
    handleSizeChange(val) {
      this.bug_page.size_page = val
      this.get_bug_list()
    },
    // 底部页签跳转
    handleCurrentChange(val) {
      this.bug_page.current_page = val
      this.get_bug_list()
    },
    get_bug_list() {
      const req = this.bug_page
      req.project_id = this.menu_id
      req.select_time = this.select_time
      req.username_select = this.username_select
      req.bug_name = this.bug_name
      bug_list(req).then(res => {
        if (res.data.code === 200) {
          this.bug_data = res.data.content
          this.bug_total = res.data.bug_total
          this.bug_page.current_page = res.data.current_page
          this.bug_page.size_page = res.data.size_page
          this.create_username = res.data.create_username
          this.create_time = res.data.create_time
          this.update_time = res.data.update_time
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    get_user_select() {
      user_all().then(res => {
        this.user_list = res.data.content
      })
    },
    children_view(data) {
      if ("children" in data) { // json就是数组，name是你要找的值
        return 1
      } else {
        return 0
      }
    },
    new_menu(data) {
      this.add_dialogVisible = true
      this.action = 0
      this.menu_list = data
      if (this.children_view(this.menu_list) === 0) {
        this.menu_list.children = []
      }
    },
    add_menu_project() {
      const req = this.project_form
      req.id = this.menu_list.id
      req.project_id = this.project_id
      req.project_prd = this.project_prd
      req.action = "add"
      req.type = this.type_value
      req.user_id = Number(localStorage.getItem("user_id"))
      add_edit_menu(req).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.message)
          this.menu_list.children.push(res.data.data)
          this.add_dialogVisible = false
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    edit_menu(data) {
      this.add_dialogVisible = true
      this.menu_list = data
      this.menu_id = data.id
      this.action = 1
      this.project_form.label = data.label
      this.project_prd = data.project_prd
    },
    edit_menu_project() {
      const req = this.project_form
      req.id = this.menu_id
      req.type = this.menu_list.type
      req.action = "edit"
      req.user_id = Number(localStorage.getItem("user_id"))
      req.project_prd = this.project_prd
      req.project_id = this.project_id
      add_edit_menu(req).then(res => {
        if (res.data.code === 200) {
          this.add_dialogVisible = false
          this.$message.success(res.data.message)
          const temp = this.tableTabs.find(o => o.content === this.menu_list.id)
          if (temp) {
            temp.title = res.data.label
          }
          this.menu_list.label = res.data.label
          this.project_prd = res.data.project_prd
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    del_menus(node, data) {
      this.del_dialog = true
      this.menu_list = data
      this.node_data = node
    },
    delete_menu() {
      const data = this.menu_list
      const node = this.node_data
      del_menu(data).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.message)
          const parent = node.parent;
          const children = parent.data.children || parent.data;
          const index = children.findIndex(d => d.id === data.id);
          children.splice(index, 1);
          this.del_dialog = false
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    add_bug_dialog() {
      this.add_bug_dialogVisible = true
      this.bug_detail = {}
      this.action = 0
      this.bug_detail.bug_content = "<p>操作步骤：</p><p><br></p><p> 实际结果：</p><p><br></p><p> 预期结果：</p><br>"
    },
    edit_bug_dialog(data) {
      this.add_bug_dialogVisible = true
      this.bug_detail = data
      this.action = 1
      this.bug_detail.id = null
    },
    add_bug() {
      const req = this.bug_detail
      req.bug_id = this.bug_detail.id
      req.action = this.action
      req.id = this.menu_id
      req.user_id = Number(localStorage.getItem("user_id"))
      add_bug_detail(req).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.message)
          this.add_bug_dialogVisible = false
          this.get_bug_list()
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    view_bug_dialog(data) {
      this.add_bug_dialogVisible = true
      this.bug_detail = data
      this.action = 2
    },
    delete_bug_dialog(data) {
      this.del_bug_dialog = true
      this.bug_id = data
    },
    delete_bug() {
      del_bug({ "id": this.bug_id, "user_id": Number(localStorage.getItem("user_id")) }).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.message)
          this.get_bug_list()
          this.del_bug_dialog = false
        } else {
          this.$message.error(res.data.message)
        }
      })
    }
  }
}
</script>
<style lang="scss">
.el-dialog__body {
  padding: 10px !important;
}
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 4px;
  }
  .el-dropdown {
    font-size: 16px;
    color: #5d697a;
  }
  .my-label {
    background: rgba(216, 243, 234, 0.31) !important;
  }
  .my-content {
    background: #e2fdf1;
  }
  .quillEditor {
    min-height: 400px;
  }
  .ql-toolbar.ql-snow{}
  .ql-container.ql-snow {
    min-height: 400px;
  }
</style>
